<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{_fragment :: head(title='标签管理')}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
    <title>标签管理</title>
</head>
<body>


<!--导航-->
<nav class="ui inverted attached segment" th:replace="_fragment :: nav(n=4)">
    <div class="ui container">
        <div class="ui inverted menu secondary">
            <!--            item表示是menu中的单位之一-->
            <h2 class="ui teal header item">
                WANT
            </h2>
            <a href="#" class="ui item"><i class="info icon"></i>博客列表</a>
            <a href="#" class="ui item "><i class="home icon"></i>博客</a>
            <a href="#" class="ui item"><i class="idea icon"></i>分类</a>
            <a href="#" class="ui item active"><i class="tags icon"></i>标签</a>

            <div class="item right">

            </div>
        </div>
    </div>
</nav>



<!--弹出层-->
<div class="ui modal" hidden>
    <i class="close icon"></i>
    <div class="header">
        标签新增
    </div>
    <div class="ui container">
        <form action="#" th:action="@{/admin/upOrinTag}"  id="tag-form" class="ui form" method="post">
            <div class="required field">
                <div class="ui labeled input">
                    <label class="ui compact basic teal label">标签名</label>
                    <input type="text" class="ui input" name="name">
                </div>
            </div>

        </form>
    </div>
    <div class="actions">
        <div class="ui black button">
            重置
        </div>
        <div class="ui positive right labeled icon button" th:id="submit-btn">
            提交
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>


<div class="ui container m-padded-tb-massive">
    <div class="ui table celled">

        <table class="ui table compact" th:fragment="taglist" id="tagtable">
            <thead>
            <tr>
                <td></td>
                <td>名称</td>
                <td>操作</td>
            </tr>
            </thead>

            <th:block th:if="${jsonResult != null}">
                <tbody>
                <tr th:each="tag,tStat : ${jsonResult.data.data}">
                    <td th:text="${tStat.count}">1</td>
                    <td th:text="${tag.name}">tag</td>
                    <td>
                        <a href="javascript:void(0)" class="ui mini teal basic button" th:id="edit-btn" th:attr="data-tname=${tag.name},data-tid=${tag.id}" onclick="opm(this)">编辑</a>
                        <a href="javascript:void(0)" class="ui mini red basic button" th:id="delete-btn" th:attr="data-tid=${tag.id}" onclick="ajaxfunc(this)">删除</a>
                    </td>
                </tr>
                </tbody>

                <tfoot>
                <tr>
                    <th colspan="3">
                        <div class="ui fields inline">
                            <div class="field">
                                <div class="ui mini pagination menu"  >
                                    <div class="ui button item"><a  th:id="first-btn" onclick="ajaxfunc(this)" th:attr="data-curr=1">首页</a></div>
                                    <div class="ui button item"><a  th:id="pre-btn" onclick="ajaxfunc(this)" th:attr="data-curr=${jsonResult.data.prePage}">上一页</a></div>
                                    <div class="ui button item"><a  th:id="next-btn" onclick="ajaxfunc(this)" th:attr="data-curr=${jsonResult.data.nextPage}">下一页</a></div>
                                    <div class="ui button item"><a  th:id="last-btn" onclick="ajaxfunc(this)" th:attr="data-curr=${jsonResult.data.totalPage}">尾页</a></div>
                                </div>
                                <button id="insert-btn" th:id="insert-btn" onclick="opm(this)" class="ui mini right floated teal basic button" type="button">新增</button>
                            </div>
                        </div>

                    </th>
                </tr>
                </tfoot>
            </th:block>

        </table>
    </div>
</div>

<!--footer-->


<footer th:replace="_fragment :: footer" class="ui inverted vertical segment">

    <div class="ui center aligned container m-padded-tb-massive">
        <!--        grid将footer分为16-->
        <div class="ui grid divided inverted">
            <!--            wide填满-->
            <div class="three wide column">
                <img src="../../static/images/weichat.png" th:src="/images/weichat.png" class="image ui rounded" style="width:110px;height:110px">
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list " >
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <p>这里是一些其他信息</p>
            </div>


        </div>

        <div class="ui inverted section divider"></div>
        <p>关于法律信息</p>
    </div>
</footer>

<th:block th:replace="~{_fragment :: script}">
</th:block>

<script type="text/javascript">

    $(function () {
        //在一开始时，不需要回传任何参数。查询所有的博客即可
        $.ajax({
            url:"/admin/listTag",
            type:"get",
            success:function (res) {
                $('#tagtable').html(res);
            }
        })
    });

    //函数
    function opm(attr){
        $('.ui.modal')
            .modal('show')
        ;
        var aid=$(attr).attr("id");
        console.log(aid)
        if($.trim(aid)=="edit-btn"){
            var tname=$(attr).data("tname");
            var tid=$(attr).data("tid");
            $("input[name='id']").val(tid);
            $("input[name='name']").val(tname);
        }else if($.trim(aid)=="insert-btn"){
            $("input[name='id']").val('');
            $("input[name='name']").val('');
        }
    }

    //分页 删除
    function ajaxfunc(curr){
        var aid=$(curr).attr("id");
        if(aid=="delete-btn"){
            var tid=$(curr).data("tid")
            console.log(tid)
            $.ajax({
                url:"/admin/deleteTag",
                type: "post",
                data:{
                    "id":tid
                },
                success:function (res) {
                    $(curr).parents("tr").remove();
                }
            })
        }else{
            var currentPage=$(curr).data("curr");
            $.ajax({
                url:"/admin/listTag",
                type:"get",
                data:{
                    "currentPage":currentPage,
                },
                success:function (res) {
                    $('#tagtable').html(res);
                }
            })
        }

    };






    //表单按钮
    $('#submit-btn').click(function () {
        var tid=$("input[name='id']").val();
        var tname=$("input[name='name']").val();

        $.ajax({
            url:"/admin/upOrinTag",
            type:"post",
            dataType:"json",
            data:{
                "id":tid,
                "name":tname,
            },
            success:function (res) {
                if (res.success==true){
                    $.ajax({
                        url:"/admin/listTag",
                        type:"get",
                        success:function (res) {
                            $('#tagtable').html(res);
                        }
                    })
                }
            }
        })

    });
</script>
</body>
</html>